* {
  margin: 0;
  padding: 0;
}
body {
}
body,
section {
  overflow-x: hidden;
  block-size: 100%;
  font-size: 16px;
}

/* 设置 html 元素的纵向滚动方式为强制性的 */
html {
  scroll-snap-type: y mandatory;
}

/* 设置 section 元素的滚动对齐方式为起始位置，并且始终停止滚动 */
section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* 设置.box的宽度为视口宽度，高度为视口高度，相对定位，显示为flex布局， 
        溢出隐藏 */
.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  overflow: hidden;
}

/* 设置.box-block的绝对定位，顶部和左侧均为0，宽度和高度为100%， 
        背景尺寸为120%，背景不重复，背景位置为中心顶部，使用3D变换， 
        will-change属性为background-position */
.box-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 120%;
  background-repeat: no-repeat;
  background-position: center 0;
  transform: translate3d(0, 0, 0);
  will-change: background-position;
}

/* 在最大宽度为1200px的媒体查询下，将.box-block的背景尺寸设置为150%， 
        .box的高度设置为50vh */
@media (max-width: 1200px) {
  .box-block {
    background-size: 400%;
  }

  .box {
    height: 100vh;
  }
}

/* 设置.box-block的伪元素::before的绝对定位，顶部和左侧均为0，内容为空， 
        显示为块级元素， 宽度和高度为100%，背景颜色为rgba(0, 0, 0, 0.35)， 
        背景颜色的过渡效果为0.3秒的ease过渡 */
.box-block::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  transition: background-color 0.3s ease;
}

/* 当鼠标悬停在.box上时，将.box-block的伪元素::before的 
        背景颜色设置为rgba(0, 0, 0, 0.2) */
.box:hover .box-block::before {
  background-color: rgba(47,47,47,0.6);
}

/* 设置.box-text的相对定位，宽度和高度为100%，显示为flex布局， 
        垂直居中和水平居中，主轴为纵向 */
.box-text {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "优设标题黑";
  color: #f1f1f1;
}

/* 设置.box-text内的.text-title的字体大小为24px， 
        底部外边距为20px */
.box-text .text-title {
  font-size: 34px;
  margin-bottom: 20px;
}

.box:nth-child(1n) .box-block {
  background-image: url("./image/18.jpg");
}

.box:nth-child(2n) .box-block {
  background-image: url("./image/13.jpg");
  background-position: 1000px 1100px;
}

.box:nth-child(3n) .box-block {
  background-image: url("./image/20.jpg");
}

.box:nth-child(4n) .box-block {
  background-image: url("./image/21.jpg");
}

.box:nth-child(5n) .box-block {
  background-image: url("./image/26.jpg");
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  width: 40px;
  height: 40px;
  vertical-align: middle; /* 垂直居中对齐 */

  border: 6px solid #ccc;
  border-radius: 50%;
  cursor: pointer;

  transition: all 0.3s;
}

input[type="radio"]:hover {
  border-color: #999;
}

input[type="radio"]:checked {
  background-color: #ffd700;
  border-color: #ffd700;
}

input[type="radio"]:checked:hover {
  background-color: #ffd700;
  border-color: #ffd700;
}

input[type="radio"]:active {
  transform: scale(0.9);
}

.f{
  /*背景框*/
  position: absolute;
  width: 65%;
  height: 75%;
  padding: 25px;
  top: 3%;
  left: 18%;
  background-color: rgba(187, 187, 187, 0.2);
  border-radius: 12px;
  overflow: hidden;
}
.ab{
  /*背景框*/
  position: absolute;
  width: 65%;
  height: 75%;
  padding: 25px;
  top: 3%;
  left: 18%;
  background-color: rgba(187, 187, 187, 0.2);
  border-radius: 12px;
  overflow: hidden;
}
.aa{
  /*背景框*/
  position: absolute;
  width: 95%;
  height: 80%;
  padding: 25px;
  
  left: 2%;
}

.x{
  /*背景框*/
  position: absolute;
  width: 65%;
  height: 70%;
  padding: 25px;
  top: 30%;
  left: 13%;

}

.e{
  /*背景框*/
  position: absolute;
  width: 95%;
  height: 80%;
  padding: 25px;
  
  left: 2%;
  
}

.a{
  /*背景框*/
  position: absolute;
  width: 75%;
  height:5%;
  padding: 25px;
  top: 5%;
  left:17%;
  
}@media screen and (max-width: 1079px) {
  .a {
  font-size: 20px;
  width: 60%;
  height:10%;}
  .f { width: 80%;
    height: 90%;
    left: 10%;}
  .aa{
      /*背景框*/
      
      width: 95%;
      height: 90%;
    }
    .ab{
      /*背景框*/
      left: 10%;
      width: 80%;
      height: 70%;
    }
	
    .x{
  /*背景框*/
  position:relative;
  width: 80%;
  
  padding: 0px;
  top: 0%;
  

}
}
	
.b{
  /*背景框*/
  position: absolute;
  width: 75%;
  height: 5%;
  padding: 25px;
  top: 25%;
  left:17%;
  
}
@media screen and (max-width: 1079px) {
  .b {
  font-size: 20px;
  width: 60%;
  height:10%;}

}
.h2{
            display: flex;
            justify-content: center;
            align-items: center;
     }
.c{
  /*背景框*/
  position: absolute;
  width: 75%;
  height: 5%;
  padding: 25px;
  top: 45%;
  left:17%;
 
}@media screen and (max-width: 1079px) {
  .c {
  font-size: 20px;
  width: 60%;
  height:10%;}

}
.d{
  /*背景框*/
  position: absolute;
  width: 75%;
  height: 5%;
  padding: 25px;
  top: 65%;
  left:17%;
  

}

.g{
  /*背景框*/
  position: absolute;
  width: 4%;
  height: 5%;
  padding: 25px;
  top: 5.5%;
  left:2%;
  

}.h{
  /*背景框*/
  position: absolute;
  width: 4%;
  height: 5%;
  padding: 25px;
  top: 25.5%;
  left:2%;
  

}
.y{
  /*背景框*/
  position: absolute;
  width: 4%;
  height: 5%;
  padding: 25px;
  top: 45.5%;
  left:2%;
  

}
.t{
  /*背景框*/
  position:absolute;
  width: 90%;
  height: 50%;
  top: 80%;
  left:45%;
  

}

.k{
  /*背景框*/
  position: absolute;
  width: 4%;
  height: 5%;
  padding: 25px;
  top: 65.5%;
  left:2%;
  
}
@media screen and (max-width: 1079px) {
  .d {
  font-size: 20px;
  width: 60%;
  height:10%;}
  .t{
    /*背景框*/
    
    top: 74%;
    left:40%;
    
  
  }
}

.anniu{
  /*背景框*/
  position: absolute;
 
  
  top: 50%;
  left: 36%;
}




h5 {
  font-size: 36px;}

@media screen and (max-width: 1079px) {
   h1 {font-size: 30px; /* 当窗口宽度小于480px时字体再次变小 */}
 
  h5 {font-size: 18px;}
	.two{
        display: none;
    }
	

}


/*界面2*/
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: blanchedalmond url("./image/15.jpg") no-repeat center center/cover;
  z-index: -1;
  overflow: hidden;
}
        
    
.showcase {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  
}
.video-container video {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  
.z {
    font-family: "PingFang SC",Arial,"微软雅黑",sans-serif;
    line-height: 1.5;
    top: 0%;
}
.btn {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    padding: 10px 20px ;
    border: 1px solid #fff;
    margin-top: 20px;
    border-radius: 5px;
    letter-spacing: 2px;
    transition: .2s;
}

.btn:hover {
    transform: scale(.9);
    backdrop-filter: blur(5px);
}  

/*文字打字动画*/
.cursor{
    position: relative;
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}
/* Animation */
.typewriter-animation {
  animation: 
    typewriter s steps(50) 1s 1 normal both, 
    blinkingCursor 500ms steps(50) infinite normal;
}
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blinkingCursor{
  from { border-right-color: rgba(255,255,255,.75); }
  to { border-right-color: transparent; }
}


/*文字滑动动画*/
/*h5::before {
  content: " ";
  display: block;
  position: absolute;
  top: 36px; 
  right: 0; 
  bottom: 36px; 
  left: 0;
  inset: 0 0 0 0;
  background: hsl(200 100% 80%);
  z-index: -1;

  transition: transform .5s ease;
  
  transform: scaleX(0);
  transform-origin: bottom right;
}

h5:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}*/





